/*
 * Copyright © 2017-2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import '~styles/variables.scss';

$asterisk-color: $red-02;
$success-color: $green-02;
$db-sprite-url: url('/cdap_assets/img/db-sprite.png');

@mixin db-image($index) {
  background-image: $db-sprite-url;
  background-position: 0 $index*-100px;
}

.database-options {
  padding: 10px;

  .db-image-container,
  .db-info {
    display: inline-block;
    vertical-align: middle;
  }

  .db-image-container {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }

  .db-image {
    transform: scale(0.5) translate(-50%, -50%);
  }

  .db-info {
    width: calc(100% - 65px);
  }

  .db-name {
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .db-installed {
    font-size: 12px;

    .upload {
      text-decoration: underline;
      cursor: pointer;
    }

    .check-icon {
      color: $success-color;
      margin-left: 5px;
      margin-right: 3px;
    }
  }

  .database-option {
    padding: 10px;

    &.installed {
      cursor: pointer;
    }
  }

  .options-title { font-size: 14px; }
}

.database-detail {
  .database-detail-content {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 50px;
  }

  .image-container {
    height: 50px;
    width: 50px;
    display: inline-block;
    margin-right: 10px;
  }

  .db-image {
    transform: scale(0.5) translate(-50%, -50%);
    margin-right: 0;
  }

  .db-label {
    display: inline-block;
    max-width: calc(100% - 60px);
    margin-top: 10px;
    vertical-align: top;
  }

  .driver-info {
    height: 70px;

    > div:first-child {
      height: 70px;
      font-size: 14px;
      font-weight: 500;

      span { vertical-align: top; }
    }

    .driver-detail {
      margin-top: 12px;

      .fa.fa-fw {
        margin-left: 5px;
        margin-right: 5px;
        color: $success-color;
      }
    }
  }

  .connection-check,
  .loading-indicator {
    margin-left: 10px;
    vertical-align: middle;
  }

  .col-form-label {
    font-weight: 500;
    font-size: 14px;
    padding-top: 4px;

    .asterisk {
      position: relative;
      top: -3px;
      left: 2px;
    }
  }

  .custom-input { margin-top: 5px; }

  .asterisk {
    color: $asterisk-color;
  }

  .divider {
    margin-left: 10px;
    margin-right: 10px;
  }

  .connection-type {
    line-height: 32px;
    cursor: pointer;

    .active {
      font-weight: 600;
      text-decoration: underline;
    }
  }

  .back-link-container {
    margin-top: 30px;

    .back-link {
      cursor: pointer;
    }
  }

  .error-container { margin: 10px -10px -15px -10px; }
}

.db-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  display: inline-block;
}

.db-db2 {
  @include db-image(0);
}

.db-oracle {
  @include db-image(1);
}

.db-oracle-thin {
  @include db-image(1);
}

.db-mssql {
  @include db-image(2);
}

.db-netezza {
  @include db-image(3);
}

.db-mysql {
  @include db-image(4);
}

.db-teradata {
  @include db-image(5);
}

.db-postgresql,
.db-postgresql65 {
  @include db-image(6);
}

.db-other {
  @include db-image(7);
}

.db-sqlserver42 {
  @include db-image(8);
}

.db-hive2binary,
.db-hive2http {
  @include db-image(9);
}

.db-redshift {
  @include db-image(10);
}

.db-sap-hana {
  @include db-image(11);
}

.db-cloudsql-mysql,
.db-cloudsql-postgresql {
  @include db-image(12);
}
